<template>
	<!-- :style="{ animationDelay: (index + 1) * 0.1 + `s` }" -->
	<div class="card-item" @click="handleClick">
		<img v-if="image" class="card-item-img" :src="image" />
		<div v-else class="empty-img"></div>
		<div class="card-item-mask"></div>
		<div class="card-item-name">{{ name }}</div>
	</div>
</template>

<script>
export default {
	props: {
		index: {
			type: Number,
			default: 0
		},
		image: {
			type: String,
			default: ""
		},
		name: {
			type: String,
			default: ""
		},
		slug: {
			type: [String, Number],
			default: ""
		}
	},
	methods: {
		handleClick() {
			this.$emit("click", this.slug);
		}
	}
};
</script>

<style lang="scss" scoped>
.card-item {
	transform: scale(0);

	// ease 默认的缓动效果，开始慢，接着加速，最后减速。
	// linear 匀速过渡，整个过渡过程的速度是均匀的。
	// ease-in 过渡开始时较慢，然后加速。
	// ease-out 过渡开始时较快，最后减速。
	// ease-in-out 过渡开始和结束时较慢，中间部分较快。
	// cubic-bezier(x1, y1, x2, y2) 自定义的时间函数，可以通过贝塞尔曲线来控制过渡效果的速度
	// transition: all 0.5s ease;
	animation: flat2 0.8s ease-in 1;
	animation-fill-mode: forwards;
	position: relative;
	display: inline-block;
	margin-right: 4px;
	margin-bottom: 4px;
	width: 70px;
	height: 70px;
	cursor: url(../assets/icon/circle.svg) 15 15, auto;
	&:hover {
		transform: scale(1.5);
		transition: all 0.3s;
		z-index: 2;
		.card-item-mask {
			opacity: 0.6;
		}
		.card-item-name {
			opacity: 1;
		}
	}
	.card-item-img {
		display: block;
		width: 100%;
		height: 100%;
	}
	.empty-img{
		display: block;
		width: 100%;
		height: 100%;
		background-color: #333;
	}
	.card-item-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #000;
		opacity: 0;
		transition: all 0.3s;
	}
	.card-item-name {
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		font-size: 12px;
		font-weight: 600;
		color: #fff;
		transform: translateY(-50%);
		text-align: center;
		opacity: 0;
		transition: all 0.3s;
	}
}

@keyframes flat {
	0% {
		transform: scaleX(0.1) scaleY(0.1);
		transform-origin: 0% 0%;
		opacity: 0.1;
	}
	// 50% {
	// 	transform: scaleX(0.5) scaleY(0.5);
	// 	transform-origin: 50% 50%;
	// 	opacity: 0.5;
	// }
	100% {
		transform: scaleX(1) scaleY(1);
		transform-origin: 0% 0%;
		opacity: 1;
	}
	
	// from {
	// 	transform: scaleX(0.1) scaleY(0.1);
	// 	transform-origin: 0% 0%;
	// }
	// to {
	// 	transform: scaleX(1) scaleY(1);
	// 	transform-origin: 0% 0%;
	// }
}
@keyframes flip {
	/* rotate(2D旋转) scale(放大或者缩小) translate(移动) skew(翻转) */
	0% {
		transform: rotate(0);
	}
	50% {
		transform: rotateY(180deg);
	}
	100% {
		transform: rotateY(0) rotateX(0);
	}
}
@keyframes flat2 {
	0% {
		transform: translate(-20px);
		opacity: 0;
	}
	50% {
		transform: translate(-10px);
		opacity: 1;
	}
	100% {
		transform: translate(0);
		opacity: 1.5;
	}
}
</style>